<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import Label from './Label.vue'
import '@vuepic/vue-datepicker/dist/main.css'

defineProps<{
  label?: string
}>()
const model = defineModel<Date>()
</script>

<template>
  <div class="date-picker-container">
    <Label v-if="label" :label="label" />
    <VueDatePicker
      v-model="model" class="date-picker" locale="zh" :format="(date: Date) => {
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();
        const hour = date.getHours();
        const minute = date.getMinutes();
        return `${year}年${month}月${day}日 ${hour}时${minute}分`;
      }"
    />
  </div>
</template>

<style scoped>
.date-picker-container {
  display: flex;
  flex-direction: row;
  gap: 12px;

  .date-picker {
    --dp-menu-min-width: none;
    background: var(--form-item-linear-gradient);
    border: 1.5px solid transparent;
    border-radius: 8px;

    &:deep(.dp__input) {
      border-radius: 8px;
      height: 40px;
      border: none;
    }

    &:deep(.dp__theme_light) {
      --dp-primary-color: var(--primary-color-500);
    }
  }
}
</style>
